<template>
  <div id="app">
    <top-bar></top-bar>
    <div class="mainContent">
      <choose-bar></choose-bar>
      <div class="page">
      <router-view></router-view>
      </div>
      <info-bar></info-bar>
    </div>

  </div>
</template>

<script>
import ChooseBar from "../common/chooseBar.vue";
import InfoBar from "../common/infoBar.vue";
import TopBar from "../common/topBar.vue";

export default {
  components: {
    TopBar,
    InfoBar,
    ChooseBar,
  },
};
</script>

<style scoped>
#app {
  margin: 0 auto;
  width: 1400px;
  height: 800px;
}
.mainContent {
  display: flex;
}
.page {
  flex: 1;
  margin-left: 200px;
  margin-top: 100px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 2px 0px 6px;
  min-height: 1000px;

}
</style>
